<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打勾动画</title>
    <style>
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            flex-direction: column;
        }
        h2{
            font-family:  Helvetica;
            font-size: 36px;
            margin-top: 40px;
            color: #333;
        }
        .circle{
            stroke-dasharray: 1194;
            stroke-dashoffset: 0;
            animation: animate1 2s linear ;
        }
        .tick{
            stroke-dasharray: 350;
            stroke-dashoffset: 0;
            animation: animate2 2s linear ;
        }
        @keyframes animate1 {
            from{
                stroke-dashoffset: 1194;
            }

            to{
                stroke-dashoffset: 0;
            }
        }
        @keyframes animate2 {
            from{
                stroke-dashoffset: 350;
            }

            to{
                stroke-dashoffset: 0;
            }
        }
    </style>
</head>

<body>
    <svg width="400" height="400">
        <circle fill="none" stroke="#68E534" stroke-width="20"
        cy="200" cx="200" r="190" class="circle" stroke-linecap="round" 
        transform="rotate(-90 200 200)">
        </circle>
        <polyline fill="none" stroke="#68E534" stroke-width="24" 
        points="88,214 173,284 304,138" stroke-linecap="round"
        stroke-linejoin="round" class="tick" ></polyline>
    </svg>
    <h2>支付成功</h2>
</body>

</html>